<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <!-- 查询条件区域-->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-="82px">
      <el-form-item label="">
        <el-dropdown  @command="bglxs">
          <el-button type="primary" size="min" style="width: 100px;
            height: 32px;
            border: 1px solid #1890ff;
            border-radius: 6px;
            font-size: 12px;
            color: #C1C1C1;">
            {{ bglx }}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" style="background-color: #122a64;border-color: #1890ff;">
            <el-dropdown-item style="color: #5DCBFF;" command="普通报告" @click.native="zdbg()">普通报告</el-dropdown-item>
            <el-dropdown-item style="color: #5DCBFF;" command="反冲洗报告" @click.native="txbg()">反冲洗报告</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item label="机器人名称" prop="robot_name">
        <el-input v-model="queryParams.robot_name" placeholder="请输入机器人名称" clearable @keyup.enter.native="handleQuery"
                  size="small" />
      </el-form-item>
      <el-form-item label="任务名称" prop="task_name">
        <el-input v-model="queryParams.task_name" placeholder="请输入任务名称" clearable @keyup.enter.native="handleQuery"
                  size="small" />
      </el-form-item>
      <el-form-item label="生成时间">
        <el-date-picker
            v-model="queryParams.create_times"
            style="width: 215px" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!--增删改查按钮区域-->
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!-- 数据列表区域-->
    <el-table v-loading="loading" :data="partroltaskhis" @selection-change="handleSelectionChange"
              :cell-style="{ borderColor: 'rgb(1 5 43)' }" :header-cell-style="{ borderColor: 'rgb(1 5 43)' }">
      <el-table-column label="机器人名称" align="center" prop="robot_name" />
      <el-table-column label="任务名称" align="center" prop="task_name" />
      <el-table-column label="执行时刻(H)" align="center" prop="execution_time">
        <template slot-scope="scope">
          <span>{{ scope.row.execution_time }}H</span>
        </template>
      </el-table-column>
      <el-table-column label="生成时间" align="center" prop="creater_time">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.creater_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-document" @click="handlereport(scope.row)"
                     v-hasPermi="['nssc:aerationresult:list']">查看报告</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['nssc:aerationresult:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--列表分页区域-->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList" style="background:rgb(1 5 43);" />
    <!-- 报告详情-->
    <el-dialog :title="title1" :visible.sync="open1" @close="handleCancle" width="1130px">
      <el-row :gutter="20" v-loading="loading2" type="flex" justify="center" align="middle">
        <!-- 水平居中：type="flex" justify="center" align="middle"-->
        <el-col :span="28" :xs="24">
          <div style="text-align: left;padding-bottom: 2%;font-size:14px;color:#5DCBFF;padding-left: 1%;">
            <span>报告参数</span><el-button v-print size="mini" style="float: right">打印</el-button>
          </div>
          <div id="app">
            <el-col :span="howWidth" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">任务名称</div>
                <div class="content2" style="color: #75bfff">{{form.task_name}}</div>
              </div>
            </el-col>
            <el-col :span="howWidth" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">机器人名称</div>
                <div class="content2"  style="color: #75bfff">{{form.robot_name}}</div>
              </div>
            </el-col>
            <el-col :span="howWidth" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">巡检点数</div>
                <div class="content2"  style="color: #75bfff">{{form.xjdsl}}（个）</div>
              </div>
            </el-col>
            <el-col :span="howWidth" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">执行时刻</div>
                <div class="content2"  style="color: #75bfff">{{form.execution_time}}（H）</div>
              </div>
            </el-col>
          </div>
          <div style="text-align: left;padding-bottom:2%;font-size:14px;color:#5DCBFF;padding-left: 1%;">
            <span>巡检采集</span>
            <!--  数据列表区域-->
            <el-table class="tabled1" v-loading="loading7" :data="taskresultList" @selection-change="handleSelectionChange"
                      :cell-style="{ borderColor: 'rgb(1 5 43)' }" :header-cell-style="{ borderColor: 'rgb(1 5 43)' }">
              <el-table-column label="池子编号" align="center" prop="pool_num">
                <template slot-scope="scope">
                  <span v-if="scope.row.pool_num=='1'">R滤格</span>
                  <span v-if="scope.row.pool_num=='2'">S滤格</span>
                  <span v-if="scope.row.pool_num=='3'">T滤格</span>
                  <span v-if="scope.row.pool_num=='4'">U滤格</span>
                  <span v-if="scope.row.pool_num=='5'">V滤格</span>
                  <span v-if="scope.row.pool_num=='6'">W滤格</span>
                  <span v-if="scope.row.pool_num=='7'">X滤格</span>
                  <span v-if="scope.row.pool_num=='8'">Y滤格</span>
                </template>
              </el-table-column>
              <el-table-column label="标签号" align="center" prop="label_num">
                <template slot-scope="scope">
                  <span>{{ scope.row.label_num }}标签</span>
                </template>
              </el-table-column>
              <el-table-column label="液位值" align="center" prop="yw" />
              <el-table-column label="采集时间" align="center" prop="creater_time" >
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.creater_time) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="采集视频" align="center" class-name="small-padding fixed-width"  width="200px">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-view"  v-if="scope.row.video_url!=null && typeof scope.row.video_url.split(';')[0]!='undefined'"  @click="handleViewVD2(scope.row.video_url.split(';')[0])">视频1</el-button>
                  <el-button size="mini" type="text" icon="el-icon-view"  v-if="scope.row.video_url!=null && typeof scope.row.video_url.split(';')[1]!='undefined'"  @click="handleViewVD2(scope.row.video_url.split(';')[1])">视频2</el-button>
                  <span style="font-size: 12px" v-if="typeof scope.row.video_url=='undefined'||scope.row.video_url==null||scope.row.video_url==''">-------</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="text-align: left;padding-bottom:2%;font-size:14px;color:#5DCBFF;padding-left: 1%;">
            <span>液位趋势</span>
            <el-dropdown  @command="lgxzf" style="margin-left:5px;">
              <el-button type="primary" size="min" style="width: 100px;
                height: 32px;
                border: 1px solid #1890ff;
                border-radius: 6px;
                font-size: 12px;
                color: #C1C1C1;">
                {{ lgxz }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown" style="background-color: #122a64;border-color: #1890ff;">
                <el-dropdown-item style="color: #5DCBFF;" command="全部" >全部</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="R滤格">R滤格</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="S滤格">S滤格</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="T滤格">T滤格</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="U滤格">U滤格</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="V滤格">V滤格</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="W滤格">W滤格</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="X滤格">X滤格</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="Y滤格">Y滤格</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <div id="container3" ref="chinaMapChart3" style="height:350px;"></div>
          </div>
          <div style="text-align: left;padding-bottom:2%;font-size:14px;color:#5DCBFF;padding-left: 1%;">
            <span>算法分析</span>
            <!--  数据列表区域-->
            <el-table class="tabled1" v-loading="loading6" :data="areationresultList1" @selection-change="handleSelectionChange"
                      :cell-style="{ borderColor: 'rgb(1 5 43)' }" :header-cell-style="{ borderColor: 'rgb(1 5 43)' }">
              <el-table-column label="池子编号" align="center" prop="pond_num">
                <template slot-scope="scope">
                  <span v-if="scope.row.pond_num=='1'">R滤格</span>
                  <span v-if="scope.row.pond_num=='2'">S滤格</span>
                  <span v-if="scope.row.pond_num=='3'">T滤格</span>
                  <span v-if="scope.row.pond_num=='4'">U滤格</span>
                  <span v-if="scope.row.pond_num=='5'">V滤格</span>
                  <span v-if="scope.row.pond_num=='6'">W滤格</span>
                  <span v-if="scope.row.pond_num=='7'">X滤格</span>
                  <span v-if="scope.row.pond_num=='8'">Y滤格</span>
                </template>
              </el-table-column>
              <el-table-column label="标签号" align="center" prop="point">
                <template slot-scope="scope">
                  <span>{{ scope.row.point }}标签</span>
                </template>
              </el-table-column>
              <el-table-column label="报警状态" align="center" prop="state_name">
                <template slot-scope="scope">
                  <el-tag style="color: #04913c!important" v-if="scope.row.state_name=='正常'">正常</el-tag>
                  <el-tag style="color: #b0360b!important" v-else>报警</el-tag>
                </template>
              </el-table-column>
<!--              <el-table-column label="缺陷个数" align="center" prop="defect" />-->
              <el-table-column label="阀门状态" align="center" prop="fmzt" />
              <el-table-column label="标尺读值" align="center" prop="ruler_value">
                <template slot-scope="scope">
                  <span v-if=" typeof scope.row.ruler_value=='undefined' || scope.row.ruler_value==null || scope.row.ruler_value==''">-------</span>
                  <span v-else >{{scope.row.ruler_value}}</span>
                </template>
              </el-table-column>
<!--              <el-table-column label="视频帧数" align="center" prop="frame" />
              <el-table-column label="关键帧数" align="center" prop="key_frame" />-->
              <el-table-column label="分析内容" align="center" prop="state">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.state.includes('0')">无分析内容</el-tag>
                  <el-tag style="color: #b0360b!important" v-if="scope.row.state.includes('1')">阀门丢失</el-tag>
                  <el-tag style="color: #b0360b!important" v-if="scope.row.state.includes('2')">板结</el-tag>
                  <el-tag style="color: #b0360b!important" v-if="scope.row.state.includes('3')">青苔</el-tag>
                  <el-tag style="color: #b0360b!important" v-if="scope.row.state.includes('4')">未佩戴安全帽</el-tag>
                  <span v-if="scope.row.state ==''||scope.row.state ==null">-------</span>
                </template>
              </el-table-column>
              <el-table-column label="采集时间" align="center" prop="creater_time" width="220px">
                <template slot-scope="scope">
                  <span>{{parseTime(scope.row.creater_time) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="结果视频" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <!-- <el-button size="mini" type="text" icon="el-icon-view" @click="picView(scope.row)">图片列表</el-button>-->
                  <!-- <el-button size="mini" type="text" icon="el-icon-view" @click="handleViewVD(scope.row)">原视频</el-button>-->
                  <el-button size="mini" type="text" icon="el-icon-view" v-if="scope.row.sample_video!=null && typeof scope.row.sample_video.split(';')[0]!='undefined'" @click="handleViewVD1(scope.row.sample_video.split(';')[0])">结果视频1</el-button>
                  <el-button size="mini" type="text" icon="el-icon-view" v-if="scope.row.sample_video!=null && typeof scope.row.sample_video.split(';')[1]!='undefined'" @click="handleViewVD1(scope.row.sample_video.split(';')[1])">结果视频2</el-button>
                  <el-button size="mini" type="text" icon="el-icon-view" v-if="scope.row.sample_video!=null && typeof scope.row.sample_video.split(';')[2]!='undefined'" @click="handleViewVD1(scope.row.sample_video.split(';')[2])">结果视频3</el-button>
                  <span style="font-size: 12px" v-if="typeof scope.row.sample_video=='undefined'||scope.row.sample_video==null||scope.row.sample_video==''">-------</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div style="text-align: left;padding-bottom:2%;font-size:14px;color:#5DCBFF;padding-left: 1%;">
            <span>运行总图</span>
            <div id="container6" ref="chinaMapChart6" style="height:420px;"></div>
          </div>-->
          <div style="text-align: left;padding-bottom:2%;font-size:14px;color:#5DCBFF;padding-left: 1%;">
            <span>报警统计-缺陷个数</span>
            <el-dropdown  @command="bjtj" style="margin-left:5px;">
              <el-button type="primary" size="min" style="width: 100px;
                height: 32px;
                border: 1px solid #1890ff;
                border-radius: 6px;
                font-size: 12px;
                color: #C1C1C1;">
                {{ gjs }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown" style="background-color: #122a64;border-color: #1890ff;">
                <el-dropdown-item style="color: #5DCBFF;" command="全部" >全部</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="R滤格">R滤格</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="S滤格">S滤格</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="T滤格">T滤格</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="U滤格">U滤格</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="V滤格">V滤格</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="W滤格">W滤格</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="X滤格">X滤格</el-dropdown-item>
                <el-dropdown-item style="color: #5DCBFF;" command="Y滤格">Y滤格</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div style="text-align: left;padding-bottom:2%;font-size:14px;color:#5DCBFF;padding-left: 1%;">
             <div id="container" ref="chinaMapChart2" style="height:320px;width: 48%;float: left"></div>
             <div id="container3" ref="chinaMapChart4" style="height:320px;width: 48%;float: left"></div>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel4">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 单个算法分析-->
    <el-dialog :title="title2" :visible.sync="open2" width="920px">
      <!--  数据列表区域-->
      <el-table v-loading="loading1" :data="areationresultList" @selection-change="handleSelectionChange"
                :cell-style="{ borderColor: 'rgb(1 5 43)' }" :header-cell-style="{ borderColor: 'rgb(1 5 43)' }">
        <el-table-column label="池子编号" align="center" prop="pond_num">
          <template slot-scope="scope">
            <span v-if="scope.row.pond_num=='1'">R滤格</span>
            <span v-if="scope.row.pond_num=='2'">S滤格</span>
            <span v-if="scope.row.pond_num=='3'">T滤格</span>
            <span v-if="scope.row.pond_num=='4'">U滤格</span>
            <span v-if="scope.row.pond_num=='5'">V滤格</span>
            <span v-if="scope.row.pond_num=='6'">W滤格</span>
            <span v-if="scope.row.pond_num=='7'">X滤格</span>
            <span v-if="scope.row.pond_num=='8'">Y滤格</span>
          </template>
        </el-table-column>
        <el-table-column label="标签号" align="center" prop="point">
          <template slot-scope="scope">
            <span>{{ scope.row.point }}标签</span>
          </template>
        </el-table-column>
        <el-table-column label="报警状态" align="center" prop="state_name">
          <template slot-scope="scope">
            <el-tag style="color: #04913c!important" v-if="scope.row.state_name=='正常'">正常</el-tag>
            <el-tag style="color: #b0360b!important" v-else>报警</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="阀门状态" align="center" prop="fmzt" />
        <el-table-column label="标尺读值" align="center" prop="ruler_value" />
        <el-table-column label="分析内容" align="center" prop="state">
          <template slot-scope="scope">
            <el-tag  v-if="scope.row.state.includes('0')">无报警内容</el-tag>
            <el-tag style="color: #b0360b!important" v-if="scope.row.state.includes('1')">阀门丢失</el-tag>
            <el-tag style="color: #b0360b!important" v-if="scope.row.state.includes('2')">板结</el-tag>
            <el-tag style="color: #b0360b!important" v-if="scope.row.state.includes('3')">青苔</el-tag>
            <el-tag style="color: #b0360b!important" v-if="scope.row.state.includes('4')">未佩戴安全帽</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="分析时间" align="center" prop="creater_time" width="220px">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.creater_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分析结果" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
<!--            <el-button size="mini" type="text" icon="el-icon-view" @click="picView(scope.row)">图片列表</el-button>-->
<!--            <el-button size="mini" type="text" icon="el-icon-view" @click="handleViewVD(scope.row)">原视频</el-button>-->
            <el-button size="mini" type="text" icon="el-icon-view" v-if="scope.row.sample_video!=null && scope.row.sample_video!=''" @click="handleViewVD1(scope.row)">结果视频</el-button>
            <span style="font-size: 12px"v-else>-------</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open2 = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 分析结果-->
    <el-dialog :title="title3" :visible.sync="open3" width="260px">
      <!--  数据列表区域-->
      <el-table v-loading="loading3" :data="pics" @selection-change="handleSelectionChange"
                :cell-style="{ borderColor: 'rgb(1 5 43)' }" :header-cell-style="{ borderColor: 'rgb(1 5 43)' }">
        <el-table-column label="分析结果图片" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleViewPIC(scope.row)">查看图片</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open3 = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 展示图片对话框-->
    <el-dialog :title="title4" :visible.sync="open4" width="700px">
      <img :src="imgurl" alt="图片信息" width="650px" height="500px">
      <div slot="footer" class="dialog-footer">
        <el-button @click="open4 = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 视频回放对话框-->
    <el-dialog :title="title" :visible.sync="open" width="900px">
      <videoPlayer class="vjs-custom-skin videoPlayer" ref="videoplayer" :playsinline="true" width="750px" height="250px"
                   :options="playerOptions" customEventName="changed">
      </videoPlayer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import print from 'vue-print-nb';
import Vue from 'vue';
import * as echarts from 'echarts';
import "@/assets/styles/robt-bg.css";
import {
  aerationResultReport, getpic,
  getResultVideo, gettaskResultVideo,
  getUploadVideo,
  listAerationPort, taskResultReport
} from "@/api/nssc/aerationresult/aerationresult";
import {videoPlayer} from "vue-video-player";
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';
import 'videojs-contrib-hls';
import {delAerationReport,getReportInfo} from "@/api/nssc/patroltask/patroltask";
import point from "@/assets/imgs/point1.png";
import rbt from "@/assets/images/rbt1.png";
import {getMapParamInfo, getTrackMap1robot} from "@/api/nssc/trackmap/trackmap";
let myChart = null;
let myChart2 = null;
let myChart3 = null;
let myChart4 = null;
Vue.use(print);
export default {
  components: {
    videoPlayer,
  },
  data() {
    return {
      report_types: [
        {report_name:"普通报告",report_path:"1"},
        {report_name:"反冲洗报告",report_path:"2"}
      ],
      howWidth: 12,
      printBill: {
        id: "printBill",
        popTitle: this.title, // 打印配置页上方标题
        extraHead: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        clickMounted() { },
        previewBeforeOpenCallback() { }, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() { }, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {
          console.log("打印前");
        }, // 开启打印前的回调事件
        openCallback() { }, // 调用打印之后的回调事件
        closeCallback() { }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
      },
      playerOptions: {
        width: "750px",
        height: "250px",
        language: "zh-CN",
        playbackRates: [0.7, 1.0, 1.5, 2.0],// 播放速度  美团附近药店买点药涂抹下
        muted: false,// 默认情况下将会消除任何音频
        autoplay: false,// 如果true,浏览器准备好时开始回放。
        controls: true, //不显示暂停、声音、进度条组件
        loop: false, // 视频一结束就重新开始。
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        sources: [
          {
            type: "video/mp4",
            src: "", // url地址
          },
        ],
        controlBar: {
          timeDivider: false, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: true, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        }
      },
      //遮罩层
      loading: true,
      //遮罩层
      loading1: true,
      //遮罩层
      loading2: true,
      loading3: true,
      loading6:true,
      loading7:true,
      //选中数组
      bglx: "普通报告",
      lgxz: "全部",
      gjs: "全部",
      imgurl:"",
      ids: [],
      form: {
        task_name: "",
        robot_name: "",
        xjdsl: "",
        execution_time: ""
      },
      //报告参数
      tableArr: [],
      //非单个禁用
      single: true,
      picpath: null,
      //非多个禁用
      multiple: true,
      //显示搜索条件
      showSearch: true,
      // 日期
      //总条数
      total: 0,
      areationresultList: [],
      areationresultList1: [],
      taskresultList: [],
      partroltaskhis: [],
      pics:[],
      //弹出层标题
      title: "",
      title1: "",
      title2: "",
      title3: "",
      title4: "",
      //是否显示弹出层
      open: false,
      open1: false,
      open2: false,
      open3: false,
      open4: false,
      czbq:[],
      yw:[],
      czbq1:[],
      yw1:[],
      czbq2:[],
      yw2:[],
      czbq3:[],
      yw3:[],
      czbq4:[],
      yw4:[],
      czbq5:[],
      yw5:[],
      czbq6:[],
      yw6:[],
      czbq7:[],
      yw7:[],
      czbq8:[],
      yw8:[],
      zcztj:0,
      zcztj1:0,
      zcztj2:0,
      zcztj3:0,
      zcztj4:0,
      zcztj5:0,
      zcztj6:0,
      zcztj7:0,
      zcztj8:0,
      gjztj:0,
      gjztj1:0,
      gjztj2:0,
      gjztj3:0,
      gjztj4:0,
      gjztj5:0,
      gjztj6:0,
      gjztj7:0,
      gjztj8:0,
      rqsj:[],//日期
      qxsl:[],//缺陷数量
      rqsj1:[],//日期
      qxsl1:[],//缺陷数量
      rqsj2:[],//日期
      qxsl2:[],//缺陷数量
      rqsj3:[],//日期
      qxsl3:[],//缺陷数量
      rqsj4:[],//日期
      qxsl4:[],//缺陷数量
      rqsj5:[],//日期
      qxsl5:[],//缺陷数量
      rqsj6:[],//日期
      qxsl6:[],//缺陷数量
      rqsj7:[],//日期
      qxsl7:[],//缺陷数量
      rqsj8:[],//日期
      qxsl8:[],//缺陷数量
      // 表单校验
      rules: {
      },
      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 8,
        id: undefined,
        task_his_id:undefined,
        robot_name: undefined,
        task_name: undefined,
        task_id: undefined,
        robot_config_id: undefined,
        xyposition: "",
        /*  create_times: [/!*this.dealWithTime(new Date()), this.dealWithTime(new Date())*!/],
          creater_time_str: undefined,*/
      }
    };
  },
  created() {
    this.getList();//报告列表
  },
  methods: {
    // 取消按钮
    cancel4() {
      this.open1 = false;
      this.queryParams.id= undefined;
      this.queryParams.task_his_id=undefined;
      this.queryParams.robot_name= undefined;
      this.queryParams.task_name= undefined;
      this.queryParams.task_id= undefined;
      this.queryParams.robot_config_id= undefined;
      this.queryParams.xyposition= "";
      this.lgxz="全部";
      this.gjs="全部";
      if(myChart != null){myChart.clear();myChart = null;}
      if(myChart2 != null){myChart2.clear();myChart2 = null;}
      if(myChart3 != null){myChart3.clear();myChart3 = null;}
      if(myChart4 != null){myChart4.clear();myChart4 = null;}
    },
    //自定义对话框关闭方法
    handleCancle() {
      this.open1 = false;
      this.queryParams.id= undefined;
      this.queryParams.task_his_id=undefined;
      this.queryParams.robot_name= undefined;
      this.queryParams.task_name= undefined;
      this.queryParams.task_id= undefined;
      this.queryParams.robot_config_id= undefined;
      this.queryParams.xyposition= "";
      this.lgxz="全部";
      this.gjs="全部";
      if(myChart != null){myChart.clear();myChart = null;}
      if(myChart2 != null){myChart2.clear();myChart2 = null;}
      if(myChart3 != null){myChart3.clear();myChart3 = null;}
      if(myChart4 != null){myChart4.clear();myChart4 = null;}
    },
    zdbg() {
      this.$router.push('/nssc/bggl/report');
    },
    txbg() {
      this.$router.push('/nssc/bggl/report1');
    },
    //日期格式化
    dealWithTime(date) {
      let Y = date.getFullYear()
      let M = date.getMonth() + 1 - 0 >= 10 ? Number(date.getMonth()) + 1 : '0' + (Number(date.getMonth()) + 1)
      let D = date.getDate() > 10 ? date.getDate():"0"+date.getDate();
      return Y + '-' + M + '-' + D
    },
    bglxs(bglx) {
      this.bglx = bglx;
    },//液位选择框
    lgxzf(lgxz) {
      this.lgxz = lgxz;
      if(lgxz=="全部") {
        this.ywEchart(this.czbq,this.yw);
      } else if(lgxz=="R滤格"){
        this.ywEchart(this.czbq1,this.yw1);
      } else if(lgxz=="S滤格"){
        this.ywEchart(this.czbq2,this.yw2);
      } else if(lgxz=="T滤格"){
        this.ywEchart(this.czbq3,this.yw3);
      } else if(lgxz=="U滤格"){
        this.ywEchart(this.czbq4,this.yw4);
      } else if(lgxz=="V滤格"){
        this.ywEchart(this.czbq5,this.yw5);
      } else if(lgxz=="W滤格"){
        this.ywEchart(this.czbq6,this.yw6);
      } else if(lgxz=="X滤格"){
        this.ywEchart(this.czbq7,this.yw7);
      } else if(lgxz=="Y滤格"){
        this.ywEchart(this.czbq8,this.yw8);
      } else{
        this.ywEchart(this.czbq,this.yw);
      }
    },//告警选择框
    bjtj(gjs) {
      this.gjs = gjs;
      if(gjs=="全部") {
        this.spfxtj(this.zcztj, this.gjztj);//算法告警统计
        this.spqxsl(this.rqsj.length==0?[0]:this.rqsj, this.qxsl.length==0?[0]:this.qxsl);//缺陷数量
      } else if(gjs=="R滤格"){
        this.spfxtj(this.zcztj1, this.gjztj1);//算法告警统计
        this.spqxsl(this.rqsj1.length==0?[0]:this.rqsj1, this.qxsl1.length==0?[0]:this.qxsl1);//缺陷数量
      } else if(gjs=="S滤格"){
        this.spfxtj(this.zcztj2, this.gjztj2);//算法告警统计
        this.spqxsl(this.rqsj2.length==0?[0]:this.rqsj2, this.qxsl2.length==0?[0]:this.qxsl2);//缺陷数量
      } else if(gjs=="T滤格"){
        this.spfxtj(this.zcztj3, this.gjztj3);//算法告警统计
        this.spqxsl(this.rqsj3.length==0?[0]:this.rqsj3, this.qxsl3.length==0?[0]:this.qxsl3);//缺陷数量
      } else if(gjs=="U滤格"){
        this.spfxtj(this.zcztj4, this.gjztj4);//算法告警统计
        this.spqxsl(this.rqsj4.length==0?[0]:this.rqsj4, this.qxsl4.length==0?[0]:this.qxsl4);//缺陷数量
      } else if(gjs=="V滤格"){
        this.spfxtj(this.zcztj5, this.gjztj5);//算法告警统计
        this.spqxsl(this.rqsj5.length==0?[0]:this.rqsj5, this.qxsl5.length==0?[0]:this.qxsl5);//缺陷数量
      } else if(gjs=="W滤格"){
        this.spfxtj(this.zcztj6, this.gjztj6);//算法告警统计
        this.spqxsl(this.rqsj6.length==0?[0]:this.rqsj6, this.qxsl6.length==0?[0]:this.qxsl6);//缺陷数量
      } else if(gjs=="X滤格"){
        this.spfxtj(this.zcztj7, this.gjztj7);//算法告警统计
        this.spqxsl(this.rqsj7.length==0?[0]:this.rqsj7, this.qxsl7.length==0?[0]:this.qxsl7);//缺陷数量
      } else if(gjs=="Y滤格"){
        this.spfxtj(this.zcztj8, this.gjztj8);//算法告警统计
        this.spqxsl(this.rqsj8.length==0?[0]:this.rqsj8, this.qxsl8.length==0?[0]:this.qxsl8);//缺陷数量
      } else{
        this.spfxtj(this.zcztj, this.gjztj);//算法告警统计
        this.spqxsl(this.rqsj.length==0?[0]:this.rqsj, this.qxsl.length==0?[0]:this.qxsl);//缺陷数量
      }
    },
    //巡检采集
    xjcj(id){
      this.loading7 = true;
      this.queryParams.task_his_id = id; //根据历史任务id
      taskResultReport(this.queryParams).then(response => {
        this.taskresultList = response.rows;
        this.loading7 = false;
        this.czbq =[];//池子、标签号
        this.yw = [];//液位
        this.czbq1 =[];//池子、标签号
        this.yw1 = [];//液位
        this.czbq2 =[];//池子、标签号
        this.yw2 = [];//液位
        this.czbq3 =[];//池子、标签号
        this.yw3 = [];//液位
        this.czbq4 =[];//池子、标签号
        this.yw4 = [];//液位
        this.czbq5 =[];//池子、标签号
        this.yw5 = [];//液位
        this.czbq6 =[];//池子、标签号
        this.yw6 = [];//液位
        this.czbq7 =[];//池子、标签号
        this.yw7 = [];//液位
        this.czbq8 =[];//池子、标签号
        this.yw8 = [];//液位
        let size_yw = response.rows.length;
        for(let x=0;x<size_yw;x++){
          let czbh="";
          if(response.rows[x].pool_num==1) {
            this.czbq1.push("R滤格" +response.rows[x].label_num+"标签");//池子、标签号
            this.yw1.push(response.rows[x].yw);//液位
          }else if(response.rows[x].pool_num==2) {
            this.czbq2.push("S滤格" +response.rows[x].label_num+"标签");//池子、标签号
            this.yw2.push(response.rows[x].yw);//液位
          }else if(response.rows[x].pool_num==3) {
            this.czbq3.push("T滤格" +response.rows[x].label_num+"标签");//池子、标签号
            this.yw3.push(response.rows[x].yw);//液位
          }else if(response.rows[x].pool_num==4) {
            this.czbq4.push("U滤格" +response.rows[x].label_num+"标签");//池子、标签号
            this.yw4.push(response.rows[x].yw);//液位
          }else if(response.rows[x].pool_num==5) {
            this.czbq5.push("V滤格" +response.rows[x].label_num+"标签");//池子、标签号
            this.yw5.push(response.rows[x].yw);//液位
          }else if(response.rows[x].pool_num==6) {
            this.czbq6.push("W滤格" +response.rows[x].label_num+"标签");//池子、标签号
            this.yw6.push(response.rows[x].yw);//液位
          }else if(response.rows[x].pool_num==7) {
            this.czbq7.push("X滤格" +response.rows[x].label_num+"标签");//池子、标签号
            this.yw7.push(response.rows[x].yw);//液位
          }else if(response.rows[x].pool_num==8) {
            this.czbq8.push("Y滤格" +response.rows[x].label_num+"标签");//池子、标签号
            this.yw8.push(response.rows[x].yw);//液位
          }
          if(response.rows[x].pool_num==1)czbh ="R滤格";
          if(response.rows[x].pool_num==2)czbh ="S滤格";
          if(response.rows[x].pool_num==3)czbh ="T滤格";
          if(response.rows[x].pool_num==4)czbh ="U滤格";
          if(response.rows[x].pool_num==5)czbh ="V滤格";
          if(response.rows[x].pool_num==6)czbh ="W滤格";
          if(response.rows[x].pool_num==7)czbh ="X滤格";
          if(response.rows[x].pool_num==8)czbh ="Y滤格";
          this.czbq.push(czbh+response.rows[x].label_num+"标签");//池子、标签号
          this.yw.push(response.rows[x].yw);//液位
        }
        if(size_yw > 0){
          this.ywEchart(this.czbq,this.yw)
        }else{
          this.ywEchart([0],[0])
        };
      });
    },
    //查询某个报告所有分析结果
    fxjg(row) {
      this.loading6 = true;
      //根据坐标查询巡检点、机器人id、任务id
      this.queryParams.xyposition = null;
      this.queryParams.task_id = row.id;
      aerationResultReport(this.queryParams).then(response => {
        this.zcztj = 0;//正常总统计
        this.zcztj1 =0;
        this.zcztj2 =0;
        this.zcztj3 =0;
        this.zcztj4 = 0;
        this.zcztj5 =0;
        this.zcztj6 =0;
        this.zcztj7 =0;
        this.zcztj8 =0;
        this.gjztj = 0;//告警总统计
        this.gjztj1 =0;
        this.gjztj2 =0;
        this.gjztj3 =0;
        this.gjztj4 = 0;
        this.gjztj5 =0;
        this.gjztj6 =0;
        this.gjztj7 =0;
        this.gjztj8 =0;
        this.rqsj=[];//日期
        this.qxsl=[];//缺陷数量
        this.rqsj1=[];
        this.qxsl1=[];
        this.rqsj2=[];
        this.qxsl2=[];
        this.rqsj3=[];
        this.qxsl3=[];
        this.rqsj4=[];
        this.qxsl4=[];
        this.rqsj5=[];
        this.qxsl5=[];
        this.rqsj6=[];
        this.qxsl6=[];
        this.rqsj7=[];
        this.qxsl7=[];
        this.rqsj8=[];
        this.qxsl8=[];
        this.areationresultList1 = response.rows;
        this.loading6 = false;
        if(typeof response.rows!='undefined') {
          let size_sfnltj = response.rows.length;
          for(let x=0;x < size_sfnltj;x++) {
            let czbh="";
            if(response.rows[x].pond_num=='1') {
              if(response.rows[x].state_alerm=='0'){this.zcztj1=this.zcztj1 +1;}
              else{this.gjztj1=this.gjztj1 +1;}
              this.rqsj1.push("R滤格" +response.rows[x].point+"标签");//池子、标签号
              this.qxsl1.push(response.rows[x].defect);
            }else if(response.rows[x].pond_num=='2') {
              if(response.rows[x].state_alerm=='0'){this.zcztj2=this.zcztj2 +1;}
              else{this.gjztj2=this.gjztj2 +1;}
              this.rqsj2.push("S滤格" +response.rows[x].point+"标签");//池子、标签号
              this.qxsl2.push(response.rows[x].defect);
            }else if(response.rows[x].pond_num=='3') {
              if(response.rows[x].state_alerm=='0'){this.zcztj3=this.zcztj3 +1;}
              else{this.gjztj3=this.gjztj3 +1;}
              this.rqsj3.push("T滤格" +response.rows[x].point+"标签");//池子、标签号
              this.qxsl3.push(response.rows[x].defect);
            }else if(response.rows[x].pond_num=='4') {
              if(response.rows[x].state_alerm=='0'){this.zcztj4=this.zcztj4 +1;}
              else{this.gjztj4=this.gjztj4 +1;}
              this.rqsj4.push("U滤格" +response.rows[x].point+"标签");//池子、标签号
              this.qxsl4.push(response.rows[x].defect);
            }else if(response.rows[x].pond_num=='5') {
              if(response.rows[x].state_alerm=='0'){this.zcztj5=this.zcztj5 +1;}
              else{this.gjztj5=this.gjztj5 +1;}
              this.rqsj5.push("V滤格" +response.rows[x].point+"标签");//池子、标签号
              this.qxsl5.push(response.rows[x].defect);
            }else if(response.rows[x].pond_num=='6') {
              if(response.rows[x].state_alerm=='0'){this.zcztj6=this.zcztj6 +1;}
              else{this.gjztj6=this.gjztj6 +1;}
              this.rqsj6.push("W滤格" +response.rows[x].point+"标签");//池子、标签号
              this.qxsl6.push(response.rows[x].defect);
            }else if(response.rows[x].pond_num=='7') {
              if(response.rows[x].state_alerm=='0'){this.zcztj7=this.zcztj7 +1;}
              else{this.gjztj7=this.gjztj7 +1;}
              this.rqsj7.push("X滤格" +response.rows[x].point+"标签");//池子、标签号
              this.qxsl7.push(response.rows[x].defect);
            }else if(response.rows[x].pond_num=='8') {
              if(response.rows[x].state_alerm=='0'){this.zcztj8=this.zcztj8 +1;}
              else{this.gjztj8=this.gjztj8 +1;}
              this.rqsj8.push("Y滤格" +response.rows[x].point+"标签");//池子、标签号
              this.qxsl8.push(response.rows[x].defect);
            }
            if(response.rows[x].state_alerm=='0'){this.zcztj=this.zcztj +1;}
            else{this.gjztj=this.gjztj +1;}
            if(response.rows[x].pond_num==1) czbh ="R滤格";
            if(response.rows[x].pond_num==2) czbh ="S滤格";
            if(response.rows[x].pond_num==3) czbh ="T滤格";
            if(response.rows[x].pond_num==4) czbh ="U滤格";
            if(response.rows[x].pond_num==5) czbh ="V滤格";
            if(response.rows[x].pond_num==6) czbh ="W滤格";
            if(response.rows[x].pond_num==7) czbh ="X滤格";
            if(response.rows[x].pond_num==8) czbh ="Y滤格";
            this.rqsj.push(czbh+response.rows[x].point+"标签");//池子、标签号
            this.qxsl.push(response.rows[x].defect);
          }
          if(size_sfnltj > 0){
            this.spfxtj(this.zcztj, this.gjztj);//算法告警统计
            this.spqxsl(this.rqsj, this.qxsl);//缺陷数量
          }else{
            this.spfxtj(0, 0);//算法告警统计
            this.spqxsl([0],[0]);//缺陷数量
          }
        }else{
          this.spfxtj(0, 0);//算法告警统计
          this.spqxsl([0],[0]);//缺陷数量
        }
      });
    },//查询某个报告所有分析结果
    bqzt() {
      this.loading1 = true;
      this.open2 = true;
      this.title2 = "分析报告";
      //根据坐标查询巡检点、机器人id、任务id
      this.queryParams.xyposition = null;
      aerationResultReport(this.queryParams).then(response => {
        this.areationresultList = response.rows;
        this.loading1 = false;
      });
    },
    picView(row) {
      this.pics = [];
      this.pics = row.images.split(';');
      this.loading3 = true;
      this.open3 = true;
      this.title3 = "图片列表";
      this.loading3 = false;
    },//图片
    handleViewPIC(picpath) {
      getpic(picpath).then(response => {
        if(typeof response.data !="undefined"){
          let picpath = response.data.picpath;
          if(picpath != ""){
            this.open4 = true;
            this.title4 = "查看分析结果图片";
            this.imgurl = picpath;
          }else {
            this.$modal.msg("未查到图片！");
          }
        }else {
          this.$modal.msg("未查到图片！");
        }
      });
    },//原视频回放
    handleViewVD(row) {
      let mediaUrl = row.video_path;
      this.getMedia(mediaUrl);
    },//结果视频回放
    handleViewVD1(sample_video) {
      let mediaUrl = sample_video;
      this.getMedia1(mediaUrl);
    },//巡检采集视频
    handleViewVD2(video_url) {
      this.getMedia2(video_url);
    },//获取原视频，并播放视频
    getMedia(mediaUrl) {
      getUploadVideo(mediaUrl).then(response => {
        if(typeof response.data !="undefined"){
          let videopath = response.data.videopath;
          if(videopath!="") {
            this.open = true;
            this.title = "查看原视频";
            this.playerOptions.sources[0].src = videopath;
          }else {
            this.$modal.msg("未查到原视频！");
          }
        }else {
          this.$modal.msg("未查到原视频！");
        }
      });
    }, //获取结果视频，并播放视频
    getMedia1(mediaUrl) {
      getResultVideo(mediaUrl).then(response => {
        if(typeof response.data !="undefined"){
          let videopath = response.data.videopath;
          if(videopath!="") {
            this.open = true;
            this.title = "查看分析结果视频";
            this.playerOptions.sources[0].src = videopath;
          }else {
            this.$modal.msg("未查到结果视频！");
          }
        }else {
          this.$modal.msg("未查到结果视频！");
        }
      });
    }, //巡检采集视频
    getMedia2(video_url) {
      gettaskResultVideo(video_url).then(response => {
        if(typeof response.data !="undefined"){
          let videopath = response.data.videopath;
          if(videopath!="") {
            this.open = true;
            this.title = "查看巡检采集视频";
            this.playerOptions.sources[0].src = videopath;
          }else {
            this.$modal.msg("未查到巡检采集视频！");
          }
        }else {
          this.$modal.msg("未查到巡检采集视频！");
        }
      });
    },//预览功能
    preview() {
      console.log("preview");
    }, //停止全部预览功能
    stopAllPreview() { },
    //关闭视频窗口
    closeWindow() { },
    // 查看摄像
    videoChange() {
      this.videoOpen = true;
      //模拟摄像头预览
    },// 关闭摄像头弹窗
    videoClose() {
      this.videoOpen = false;
      this.closeWindow();
    },//报告结果
    getList() {
      this.loading = true;
      this.queryParams.task_type = 1;//普通巡检
      listAerationPort(this.queryParams).then(response => {
        this.partroltaskhis = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },//取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },//表单重置
    reset() {
      this.queryParams.task_name = null;
      this.queryParams.robot_name = null;
      this.resetForm("form");
    },//搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    }, //重置按钮操作
    resetQuery() {
      this.queryParams.create_times= [/*this.dealWithTime(new Date()), this.dealWithTime(new Date())*/];
      this.queryParams.task_name = null;
      this.queryParams.robot_name = null;
      this.resetForm("queryForm");
      this.handleQuery();
    }, //多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },//删除按钮操作
    handleDelete(row) {
      this.$modal.confirm('是否确认删除选中的数据项？').then(function () {
        return delAerationReport(row);
      }).then(() => {
        this.queryParams.id = undefined;
        this.queryParams.robot_name = undefined;
        this.queryParams.task_name= undefined;
        this.queryParams.task_id= undefined;
        this.queryParams.robot_config_id= undefined;
        this.queryParams.xyposition= ""
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    }, beforeDestroy() {
      if(myChart != null){myChart.clear();myChart = null;}
      if(myChart2 != null){myChart2.clear();myChart2 = null;}
      if(myChart3 != null){myChart3.clear();myChart3 = null;}
      if(myChart4 != null){myChart4.clear();myChart4 = null;}
    },//报告详情
    handlereport(row) {
      this.loading2 = true;
      this.open1 = true;
      this.title1 = "任务报告详情";
      this.queryParams.robot_config_id = row.robot_config_id;
      this.queryParams.robot_id = row.robot_config_id;
      this.queryParams.task_id = row.task_id;
      this.queryParams.id = row.id;
      this.queryParams.creater_time_str = row.creater_time_str;
      getReportInfo(this.queryParams).then(response => {
        this.form = response.data.bgcs//报告参数
      });
      this.xjcj(row.id);//巡检采集 ----row.id历史记录id
      this.fxjg(row);//分析结果
     // this.getMap(row.robot_config_id);//电子总图
      this.queryParams.creater_time_str =null;
      this.loading2 = false;
    },
    //查询某个报告所有分析结果
    spfxjg() {
      this.queryParams.xyposition = null;
      aerationResultReport(this.queryParams).then(response => {
        if(response.total == 0) this.$modal.msg("暂无视频分析结果！");
      });
    },//电子地图
    getMap(robotid) {
      this.open1 = true;
      this.title = "巡检电子轨道地图";
      this.queryParams.robotid = robotid;
      getTrackMap1robot(this.queryParams).then(response => {
        if (response.data != null && response.data.dzdt.length > 0) {
          this.result = response.data.dzdt;
          this.picpath = response.data.pic;//地图地址
          this.arrdata = [[]];//初始化地图值
          //机器人运行轨迹 //轨道地图数据
          //如果有当前巡检点位置坐标获取当前位置坐标
          if (typeof (response.data.positionxy) != "undefined") {
            let positionxy = response.data.positionxy.split(",");//xy坐标
            let xposition = positionxy[0];//机器人开始位置x坐标
            let yposition = positionxy[1];//机器人开始位置y坐标
            for (let i = 0; i < this.result.length; i++) {
              //因为我在后台取出来的数据是一行的，字符串形式
              let dataArray = this.result[i].xyposition.split(",");
              //这句话是必须的，每次都要新建一个一维数组,不然会报错
              this.arrdata[i] = new Array();
              for (let j = 0; j < dataArray.length; j++) {
                this.arrdata[i][j] = dataArray[j];
              }
            }
            const dtop = this.arrdata;
            //电子地图
            let track_map_id = response.data.track_map_id;
            //地图方向参数配置
            getMapParamInfo(track_map_id).then(response => {
              if (response != null && response.data != null) {
                console.log("response.data=="+response.data.mleft)
                //调用电子地图
                this.mapEchart(dtop, xposition, yposition, response.data.mleft, response.data.mright, response.data.mtop, response.data.mbottom);
              } else { //默认方向
                this.mapEchart(dtop, xposition, yposition, 0, 0, 0, 0);
              }
            });
          } else {
            this.mapEchart([], 0, 0, 0, 0, 0, 0);
          }
        }
      });
    },  /* 缺陷统计*/
    spqxsl(rqs, spzs){
      setTimeout(() => {
        myChart4 = echarts.init(this.$refs.chinaMapChart4)
        let option4;
        const labelOption = {
          show: true,
          position:'top',
          distance: 15,
          align:'left',
          verticalAlign: 'middle',
          color: '#00ccff',
          rotate: 90,
          fontsize:16,
          //formatter: '{c}  {name|{a}}',
          formatter: '{c}',
          fontSize: 10,
          rich: {
            name: {}
          }
        };
        option4 = {
          title: {
            text: '缺陷个数',
            y:'top',
            x:'left',
            textStyle: {
              color: '#2b49a9'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          color: ['#02678c'],
          legend: {
            data: ['缺陷个数'],
            textStyle: {
              color: "#9d9e9f"
            }
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: { show: true },
            }
          },
          xAxis: [
            {
              type: 'category',
              axisLine: {
                show: true, // 不显示坐标轴线
                lineStyle: {
                  color: '#00ccff', //x轴的颜色
                },
              },
              //横坐标值颜色
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#7287ab'
                }
              },
              splitLine: {
                show: false // 不显示网格线
              },
              axisTick: { show: false },
              data:rqs
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisTick: {
                show: true,  //刻度线
              },
              axisLabel: {
                show: true, //隐藏刻度值
              },
              axisLine: {
                show: true,//隐藏y轴
                lineStyle: {
                  color: '#00ccff', //x轴的颜色
                },
              } ,
              splitLine: {
                show: false // 不显示网格线
              },
            }
          ],
          series: [
            {
              barWidth: '16%',
              name: '缺陷个数',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data:spzs,
              itemStyle: {
                color: '#0d69ab' // 设置曲线颜色为红色（十六进制）
              },
            }
          ], dataZoom: [
            {
              fillerColor:'#0e2e79',
              borderColor:'#1c44a2',
              height:20,
              //  bottom:10,
              type: 'inside',
              startValue: 0,
              endValue: 4
            },
            {
              fillerColor:'#0e2e79',
              borderColor:'#1c44a2',
              height:20,
              //  bottom:10,
              startValue: 0,
              endValue: 4
            }
          ]
        };
        if (option4 && typeof option4 === 'object') {
          myChart4.setOption(option4);
        }
        window.addEventListener("resize", () => {
          if(myChart4!=null)myChart4.resize();
        });//同比缩放
      }  , 1);
    }, //告警正常统计
    spfxtj(zcztj,gjztj) {
      setTimeout(() => {
        myChart2 = echarts.init(this.$refs.chinaMapChart2)
        let option2;
        option2 = {
         title: {
            text: '报警统计',
            y:'top',
            x:'left',
            textStyle: {
              color: '#2b49a9'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center',
            textStyle: {
              color: "#9d9e9f"
            }
          },
          series: [
            {
              color: ['#07ad68', '#cc410e'],
              name: '',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '60%'],
              // adjust the start and end angle
              startAngle: 180,
              endAngle: 360,
              data: [
                {value: zcztj, name: '正常统计'+'（'+zcztj+'）'},
                {value: gjztj, name: '报警统计'+'（'+gjztj+'）'},
              ]
            }
          ]
        };

        if (option2 && typeof option2=== 'object') {
          myChart2.setOption(option2);
        }
        window.addEventListener("resize", () => {
          if (myChart2 != null) myChart2.resize();
        });//同比缩放
      } , 1);
    },//液位曲线图
    ywEchart(czbq,yw){
      setTimeout(() => {
        myChart3 = echarts.init(this.$refs.chinaMapChart3)
        let option3;
        option3 = {
          xAxis: {
            type: 'category',
            axisLine: {
              show: true, // 不显示坐标轴线
              lineStyle: {
                color: '#00ccff', //x轴的颜色
              },
            },
            //横坐标值颜色
            axisLabel: {
              show: true,
              textStyle: {
                color: '#7287ab'
              }
            },
            splitLine: {
              show: false // 不显示网格线
            },
            data: czbq
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: true,  //刻度线
            },
            axisLabel: {
              show: true, //隐藏刻度值
            },
            axisLine: {
              show: true,//隐藏y轴
              lineStyle: {
                color: '#00ccff', //x轴的颜色
              },
            } ,
            splitLine: {
              show: false // 不显示网格线
            },
          },
          series: [
            {
              data: yw,
              itemStyle: {
                color: '#0fa160' // 设置曲线颜色为红色（十六进制）
              },
              type: 'line',
              smooth: true,
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              markLine: {
                data: [{ type: 'average', name: 'Avg' }]
              }
            }
          ], dataZoom: [
            {
              fillerColor:'#0e2e79',
              borderColor:'#1c44a2',
              height:20,
              //  bottom:10,
              type: 'inside',
              startValue: 0,
              endValue: 6
            },
            {
              fillerColor:'#0e2e79',
              borderColor:'#1c44a2',
              height:20,
              //  bottom:10,
              startValue: 0,
              endValue: 6
            }
          ]
        };
        if (option3 && typeof option3 === 'object') {
          myChart3.setOption(option3);
        }
        window.addEventListener("resize", () => {
          if(myChart3!=null)myChart3.resize();
        });
      }, 1);
    },
    /*电子轨道图*/
    mapEchart(dtop, xposition, yposition, mleft, mright, mtop, mbottom) {
      setTimeout(() => {
        myChart = echarts.init(this.$refs.chinaMapChart6)
        let option2;
        //轨道地图数据
        let img = document.createElement('img');
        img.src = (this.picpath == null || this.picpath == '') ? require('@/assets/images/map-default.png')
            : this.picpath;
        option2 = {
          tooltip: {
            trigger: 'item',
            formatter: (params) => {  // params就是数据，这里可以打印一下看看
              // return 出去什么，鼠标移入就显示什么,marker就是提示前面蓝色的圆点
              if (typeof params.data[0] == 'undefined') {
                return ``
              } else {
                /*  return `${params.data[2]}</br>${params.marker}横坐标:${params.data[0]}</br>纵坐标:${params.data[1]}`*/
                return `${params.data[2]}`
              }
            }
          },
          /* backgroundColor: {
             type: 'pattern',
             repeat: 'no-repeat',
             width:'1060',
             height:'420',
             image: img, // 轨道图底图
           },*/
          title: {
            /* text: '机器人巡检轨迹图',*/
            left: 'center'
          },
          grid: {//底图四个方向调整
            top: mtop + '%',
            bottom: mbottom + '%',
            left: mleft + '%',
            right: mright + '%'
          },
          xAxis: {
            splitLine: { //网格线
              show: false
            },
            type: 'value',
            axisLine: {
              onZero: false,
              show: false//隐藏y轴
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false, //隐藏刻度值
            }
          },
          yAxis: {
            splitLine: { //网格线
              show: false
            },
            type: 'value',
            axisLine: {
              onZero: false,
              show: false//隐藏y轴
            },
            axisTick: {
              show: false,  //刻度线
            },
            axisLabel: {
              show: false, //隐藏刻度值
            }
          },
          series: [
            {
              label: {
                show: true,
                position: "top",
                formatter: params => {
                  return `${params.data[2].includes("报警") ? '{b|' + params.data[2] + '}' : params.data[2].includes("正常") ?  '{c|' + params.data[2] + '}':'{d|' + params.data[2] + '}'}`
                },  // label不支持html片段
                // formatter: '{@value}'// 点旁边显示label，这里使用name: '横坐标'这样写也可以，鼠标移入出现提示。
                rich: { // 因为label不支持html片段，所以css样式需要使用rich给添加进去  // formatter: '{b|{b}}\n{cstyle|{c}}', 详见https://echarts.apache.org/zh/option.html#series-pie.label
                  b: {
                    fontSize: 12,
                    color: "#f5072b",
                  },
                  c: {
                    fontSize: 12,
                    color: '#36e19a'
                  },
                  d: {
                    fontSize: 12,
                    color: '#b6fc2f'
                  }
                }
              },
              id: 'a',
              /* type: (this.picpath == null || this.picpath == '') ? 'line':'scatter',//scatter 散点，line 曲线*/
              type: 'line',
              smooth: true,
              itemStyle: {
                // 设置线条颜色
                normal: {
                  color: (this.picpath == null || this.picpath == '') ? '#1446a2' : 'rgb(4,24,169)',
                  lineStyle: {
                    width: (this.picpath == null || this.picpath == '') ? 5 : 5,
                    type: (this.picpath == null || this.picpath == '') ? 'solid' : 'solid'//可选值还有 dotted  solid
                  }
                }
              },
              symbolSize: 14,//巡检点大小
              symbol: 'image://' + point,//巡检点图标
              data: dtop,
              //  symbol: 'circle',
              markPoint: {
                label: {
                  color: 'blue',  // 文字颜色
                  // padding: [0, 0,-10, 0], // 可用padding调整图片内文字距离
                  show: true,
                  //formatter: '巡检机器人'// 自定义文字内容
                },
                //机器人大小
                itemStyle: {
                  color: {
                    type: 'linear',
                    colorStops: [{
                      offset: 0, color: 'blue' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'blue' // 100% 处的颜色
                    }]
                  }
                },
                //symbol: 'circle',
                symbol: 'image://' + rbt,
                // 自定义图片作为标注展示
                // symbolSize: [58, 38],  // 调整图片的长宽
                // symbolOffset: [10, '-50%'],  // 调整标注图片的位移方向 大小
                symbolSize: 16,//机器人大小
                data: [{//1机器人移动坐标位置
                  xAxis: xposition,
                  yAxis: yposition,
                } /*,{//2机器人移动坐标位置
                  xAxis:23000,
                  yAxis:21500,
                }*/],
              }
            },
            // 闪烁点的重点是以下配置
            {
              // 设置圆心点特效动画、大小
              type: 'effectScatter',
              data: dtop,
              symbolSize: 6,
              coordinateSystem: 'cartesian2d',
              // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效
              showEffectOn: 'render',
              // 涟漪特效配置
              rippleEffect: {
                color: '#1229d5',
                scale: 4,
                // 波纹的绘制方式,可选'stroke'和'fill'
                brushType: 'stroke'
              },
              //圆心点
              hoverAnimation: true,
              itemStyle: {
                normal: {
                  color: '#0418a9',
                  shadowBlur: 80,
                  shadowColor: '#3a86ea',
                }
              },
              zlevel: 1
            }
          ], graphic: [
            {
              type: 'image', // 图形元素类型
              id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
              right: 'center', // 根据父元素进行定位 （居中）
              bottom: '0%', // 根据父元素进行定位   （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
              z: 0,  // 层叠
              bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
              style: {
                image: img, // 这里一定要注意、注意，必须是https开头的图片路径地址
                width: 1030,
                height: 420
              }
            }
          ]
        }
        if (option2 && typeof option2 === 'object') {
          myChart.setOption(option2);
        }
        window.addEventListener("resize", () => {
          if(myChart!=null)myChart.resize();
        });//同比缩放
        //点击方法  根据巡检点，机器人id，任务id查询视频
        myChart.on("click", (params) => {
          this.loading1 = true;
          //根据坐标查询巡检点、机器人id、任务id
          this.areationresultList = null;
          if (typeof params.value != 'undefined') {
            let xypositon1 = params.value + '';
            let xypositonarr = xypositon1.split(',');
            if (xypositonarr.length > 2) {
              this.queryParams.xyposition = xypositonarr[0] + "," + xypositonarr[1] + "";
              aerationResultReport(this.queryParams).then(response => {
                if (typeof response.rows != 'undefined' && response.rows != null && response.rows != '') {
                  this.open2 = true;
                  this.title2 = "分析报告";
                  this.areationresultList = response.rows;
                  this.loading1 = false;
                } else {
                  this.loading1 = false;
                  this.$modal.msg('非巡检点！');
                }
                this.queryParams.xyposition="";
              });
            } else {
              this.$modal.msgError('巡检点坐标异常！！');
            }
          }
        });
      }, 1);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
*{
  padding: 0;
  margin: 0;
}
.el-range-editor.el-input__inner {
  background-color: rgb(14 35 86);
  color: #5DCBFF;
  border-color: #1890ff;
}

.el-range-editor--medium .el-range-input {
  font-size: 14px;
  background-color: rgb(14 35 86);
  color: #5DCBFF;
  border-color: #1890ff;
}

.el-range-editor .el-range-input {
  line-height: 1;
  background-color: rgb(14 35 86);
  color: #5DCBFF;
  border-color: #1890ff;
}
#app {
  width: 1120px;
  //min-height: 100vh;
  box-sizing: border-box;
  //padding: 50px;
  //background-color: aquamarine;
  .box {
    width: 100%;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #2B5B9B;
    border-top: 1px solid #2B5B9B;
    .content1 {
      width: 50%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background-color: #07164B;
      border-right: 1px solid #2B5B9B;
      border-bottom: 1px solid #2B5B9B;
      border-top: 1px solid #2B5B9B;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #D7D7D7;
    }
    .content2 {
      width: 50%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background: #0E2356;
      border-right: 1px solid #2B5B9B;
      border-bottom: 1px solid #2B5B9B;
      border-top: 1px solid #2B5B9B;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #D7D7D7;
      font-size: 12px;
    }
  }
}
/**列表添加垂直隐藏滚动条**/
.tabled1{
  height: 266px;
  overflow: hidden;
  overflow-y: scroll;
}
.tabled1::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
  background-color: #0b52bd;
}
</style>
